<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>喜茶 - 点单</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            heytea: {
              green: '#00B42A',
              lightGreen: '#E8F7EA',
              darkGreen: '#008000',
              orange: '#FF7D00',
              gray: '#F2F3F5',
              darkGray: '#86909C'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
    </script>
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
    }
  </style>
  
  <style>
    /* 基础动画定义 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fadeIn {
      animation: fadeIn 0.5s ease forwards;
    }
    
    .category-item.active {
      border-color: #00B42A;
      color: #00B42A;
      font-weight: 600;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>

<body class="bg-gray-50 font-sans">
  <!-- 顶部导航栏 -->
  <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- 品牌Logo -->
        <div class="flex items-center">
          <a href="#" class="flex items-center">
            <span class="text-heytea-green text-2xl md:text-3xl font-bold">喜茶</span>
          </a>
        </div>
        
        <!-- 中间导航 - 仅在中等以上屏幕显示 -->
        <nav class="hidden md:flex space-x-8">
          <a href="#" class="text-heytea-green font-medium border-b-2 border-heytea-green">点单</a>
          <a href="#" class="text-gray-600 hover:text-heytea-green transition-colors">门店</a>
          <a href="#" class="text-gray-600 hover:text-heytea-green transition-colors">会员</a>
          <a href="#" class="text-gray-600 hover:text-heytea-green transition-colors">关于我们</a>
        </nav>
        
        <!-- 右侧功能区 -->
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
          <button class="text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-user text-lg"></i>
          </button>
          <!-- 购物车按钮 -->
          <button id="cartBtn" class="relative text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-shopping-cart text-lg"></i>
            <span id="cartCount" class="absolute -top-2 -right-2 bg-heytea-orange text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
          </button>
          <!-- 移动端菜单按钮 -->
          <button id="mobileMenuBtn" class="md:hidden text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-bars text-lg"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t animate-fadeIn">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#" class="block py-2 text-heytea-green font-medium">点单</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">门店</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">会员</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">关于我们</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-24 md:pt-28 pb-20">
    <!-- 门店选择条 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <i class="fa fa-map-marker text-heytea-green mr-2"></i>
          <span class="font-medium">当前门店：喜茶(上海新天地店)</span>
        </div>
        <button class="text-heytea-green text-sm hover:underline flex items-center">
          切换 <i class="fa fa-angle-right ml-1"></i>
        </button>
      </div>
      <div class="text-sm text-gray-500 mt-1">
        <span>预计取茶时间：</span>
        <span class="text-gray-700 font-medium">15-25分钟</span>
      </div>
    </div>
    
    <!-- 分类和商品列表 -->
    <div class="flex flex-col md:flex-row gap-6">
      <!-- 左侧分类 -->
      <div class="md:w-1/5 lg:w-1/6">
        <div class="bg-white rounded-lg shadow-sm p-3 sticky top-24">
          <h3 class="text-lg font-semibold mb-3 px-2">饮品分类</h3>
          <ul class="space-y-1" id="categoryList">
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="all">
                全部饮品
              </button>
            </li>
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="milk">
                奶茶系列
              </button>
            </li>
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="fruit">
                果茶系列
              </button>
            </li>
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="cheese">
                芝士系列
              </button>
            </li>
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="coffee">
                咖啡系列
              </button>
            </li>
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="food">
                小食甜点
              </button>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 右侧商品列表 -->
      <div class="md:w-4/5 lg:w-5/6">
        <!-- 筛选和排序 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex flex-wrap gap-2">
              <button class="px-3 py-1 bg-heytea-lightGreen text-heytea-green rounded-full text-sm">
                新品
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                热饮
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                冰饮
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                不含茶
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                低卡
              </button>
            </div>
            <div class="relative">
              <select class="appearance-none bg-gray-100 border-none rounded-lg px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-heytea-green/30">
                <option>默认排序</option>
                <option>销量优先</option>
                <option>价格从低到高</option>
                <option>价格从高到低</option>
              </select>
              <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none text-xs"></i>
            </div>
          </div>
        </div>
        
        <!-- 商品网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="productGrid">
          <!-- 商品1 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="milk">
            <div class="relative">
              <img src="https://picsum.photos/seed/heymilk1/400/300" alt="喜茶经典奶茶" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-green text-white text-xs px-2 py-1 rounded-md">招牌</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="1" data-name="经典珍珠奶茶" data-price="18" data-img="https://picsum.photos/seed/heymilk1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">经典珍珠奶茶</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">精选阿萨姆红茶，搭配香醇鲜奶，加入Q弹珍珠，口感丰富。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥18</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.8 (1200+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品2 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="fruit">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfruit1/400/300" alt="多肉葡萄" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-orange text-white text-xs px-2 py-1 rounded-md">新品</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="2" data-name="多肉葡萄" data-price="25" data-img="https://picsum.photos/seed/heyfruit1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">多肉葡萄</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">新鲜葡萄果肉与清香绿茶融合，顶部覆盖绵密芝士奶盖。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥25</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.9 (2500+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品3 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="cheese">
            <div class="relative">
              <img src="https://picsum.photos/seed/heycheese1/400/300" alt="芝士莓莓" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="3" data-name="芝士莓莓" data-price="28" data-img="https://picsum.photos/seed/heycheese1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">芝士莓莓</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">草莓与蓝莓混合果泥，搭配清幽绿茶，顶部是咸香芝士奶盖。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥28</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.7 (1800+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品4 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="coffee">
            <div class="relative">
              <img src="https://picsum.photos/seed/heycoffee1/400/300" alt="厚乳拿铁" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="4" data-name="厚乳拿铁" data-price="22" data-img="https://picsum.photos/seed/heycoffee1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">厚乳拿铁</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">精选 espresso 与醇厚牛奶完美融合，口感丝滑，回味悠长。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥22</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.6 (950+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品5 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="food">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfood1/400/300" alt="波波冰" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-green text-white text-xs px-2 py-1 rounded-md">热销</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="5" data-name="黑糖波波冰" data-price="20" data-img="https://picsum.photos/seed/heyfood1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">黑糖波波冰</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">浓郁鲜奶冰沙，加入黑糖风味珍珠，顶部撒有黄豆粉。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥20</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.8 (1500+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品6 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="fruit">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfruit2/400/300" alt="满杯橙子" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="6" data-name="满杯橙子" data-price="23" data-img="https://picsum.photos/seed/heyfruit2/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">满杯橙子</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">新鲜橙子榨汁，搭配清香绿茶，酸甜爽口，维C满满。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥23</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.5 (800+)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="mt-10 text-center">
          <button class="px-6 py-3 border border-heytea-green text-heytea-green rounded-full hover:bg-heytea-lightGreen transition-colors font-medium">
            加载更多 <i class="fa fa-angle-down ml-1"></i>
          </button>
        </div>
      </div>
    </div>
  </main>
  
  <!-- 购物车侧边栏 -->
  <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
    <div class="h-full flex flex-col">
      <!-- 购物车头部 -->
      <div class="p-4 border-b flex items-center justify-between">
        <h3 class="text-lg font-semibold">我的购物车</h3>
        <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 购物车内容 -->
      <div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide">
        <!-- 购物车为空状态 -->
        <div id="emptyCart" class="h-full flex flex-col items-center justify-center text-center text-gray-500 py-10">
          <i class="fa fa-shopping-cart text-5xl mb-4 opacity-30"></i>
          <p class="mb-2">购物车还是空的哦</p>
          <p class="text-sm">快去添加喜欢的饮品吧~</p>
        </div>
        
        <!-- 购物车商品将通过JS动态添加 -->
      </div>
      
      <!-- 购物车底部 -->
      <div class="p-4 border-t bg-gray-50">
        <div class="flex justify-between mb-2">
          <span class="text-gray-600">小计</span>
          <span id="cartSubtotal" class="font-semibold">¥0</span>
        </div>
        <div class="flex justify-between mb-4">
          <span class="text-gray-600">预计打包费</span>
          <span id="cartPackaging" class="font-semibold">¥0</span>
        </div>
        <div class="flex justify-between text-lg mb-6">
          <span class="font-medium">总计</span>
          <span id="cartTotal" class="font-bold text-heytea-green">¥0</span>
        </div>
        <button id="checkoutBtn" class="w-full bg-heytea-green text-white py-3 rounded-lg font-medium hover:bg-heytea-darkGreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
          去结算
        </button>
      </div>
    </div>
  </div>
  
  <!-- 半透明遮罩 -->
  <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300"></div>
  
  <!-- 加入购物车成功提示 -->
  <div id="addToCartToast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-heytea-green text-white px-6 py-3 rounded-full shadow-lg flex items-center opacity-0 pointer-events-none transition-opacity duration-300 z-50">
    <i class="fa fa-check mr-2"></i>
    <span>已加入购物车</span>
  </div>
  
  <!-- 页脚 -->
  <footer class="bg-gray-100 py-10">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h4 class="text-lg font-bold text-heytea-green mb-4">喜茶</h4>
          <p class="text-gray-600 text-sm">喜茶，新茶饮的开创者，坚持使用优质原料，为顾客带来美味与健康。</p>
        </div>
        <div>
          <h5 class="font-semibold mb-4">关于我们</h5>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-heytea-green transition-colors">品牌故事</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">新闻动态</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">加入我们</a></li>
          </ul>
        </div>
        <div>
          <h5 class="font-semibold mb-4">帮助中心</h5>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-heytea-green transition-colors">常见问题</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">联系客服</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">隐私政策</a></li>
          </ul>
        </div>
        <div>
          <h5 class="font-semibold mb-4">关注我们</h5>
          <div class="flex space-x-4 mb-4">
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
          <p class="text-sm text-gray-600">客服热线：400-820-6878</p>
        </div>
      </div>
      <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
        <p>© 2023 喜茶 HEYTEA. 保留所有权利</p>
      </div>
    </div>
  </footer>

  <script>
    // 购物车数据
    let cart = [];
    
    // DOM元素
    const navbar = document.getElementById('navbar');
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const cartBtn = document.getElementById('cartBtn');
    const closeCartBtn = document.getElementById('closeCartBtn');
    const cartSidebar = document.getElementById('cartSidebar');
    const overlay = document.getElementById('overlay');
    const cartItems = document.getElementById('cartItems');
    const emptyCart = document.getElementById('emptyCart');
    const cartCount = document.getElementById('cartCount');
    const cartSubtotal = document.getElementById('cartSubtotal');
    const cartPackaging = document.getElementById('cartPackaging');
    const cartTotal = document.getElementById('cartTotal');
    const checkoutBtn = document.getElementById('checkoutBtn');
    const addToCartButtons = document.querySelectorAll('.add-to-cart');
    const addToCartToast = document.getElementById('addToCartToast');
    const categoryItems = document.querySelectorAll('.category-item');
    const productCards = document.querySelectorAll('.product-card');
    
    // 监听滚动事件，改变导航栏样式
    window.addEventListener('scroll', () => {
      if (window.scrollY > 10) {
        navbar.classList.add('shadow');
      } else {
        navbar.classList.remove('shadow');
      }
    });
    
    // 移动端菜单切换
    mobileMenuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 购物车侧边栏控制
    function openCart() {
      cartSidebar.classList.remove('translate-x-full');
      overlay.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }
    
    function closeCart() {
      cartSidebar.classList.add('translate-x-full');
      overlay.classList.add('hidden');
      document.body.style.overflow = '';
    }
    
    cartBtn.addEventListener('click', openCart);
    closeCartBtn.addEventListener('click', closeCart);
    overlay.addEventListener('click', closeCart);
    
    // 分类筛选
    categoryItems.forEach(item => {
      item.addEventListener('click', () => {
        // 移除所有分类的active类
        categoryItems.forEach(i => i.classList.remove('active'));
        // 给当前点击的分类添加active类
        item.classList.add('active');
        
        const category = item.getAttribute('data-category');
        
        // 筛选商品
        productCards.forEach(card => {
          if (category === 'all' || card.getAttribute('data-category') === category) {
            card.style.display = 'block';
            // 添加动画效果
            setTimeout(() => {
              card.style.opacity = '1';
              card.style.transform = 'scale(1)';
            }, 50);
          } else {
            card.style.opacity = '0';
            card.style.transform = 'scale(0.95)';
            setTimeout(() => {
              card.style.display = 'none';
            }, 300);
          }
        });
      });
    });
    
    // 初始化默认选中"全部饮品"
    document.querySelector('.category-item[data-category="all"]').classList.add('active');
    
    // 添加到购物车功能
    addToCartButtons.forEach(button => {
      button.addEventListener('click', () => {
        const id = button.getAttribute('data-id');
        const name = button.getAttribute('data-name');
        const price = parseFloat(button.getAttribute('data-price'));
        const img = button.getAttribute('data-img');
        
        // 检查商品是否已在购物车中
        const existingItem = cart.find(item => item.id === id);
        
        if (existingItem) {
          // 如果已存在，增加数量
          existingItem.quantity++;
        } else {
          // 如果不存在，添加到购物车
          cart.push({
            id,
            name,
            price,
            img,
            quantity: 1
          });
        }
        
        // 更新购物车UI
        updateCartUI();
        
        // 显示添加成功提示
        showAddToCartToast();
      });
    });
    
    // 显示添加到购物车提示
    function showAddToCartToast() {
      addToCartToast.style.opacity = '1';
      addToCartToast.style.pointerEvents = 'auto';
      
      setTimeout(() => {
        addToCartToast.style.opacity = '0';
        addToCartToast.style.pointerEvents = 'none';
      }, 2000);
    }
    
    // 更新购物车UI
    function updateCartUI() {
      // 清空购物车列表
      cartItems.innerHTML = '';
      
      // 更新购物车数量
      const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
      cartCount.textContent = totalItems;
      
      // 如果购物车为空，显示空状态
      if (cart.length === 0) {
        cartItems.appendChild(emptyCart);
        checkoutBtn.disabled = true;
      } else {
        // 否则，添加购物车商品
        cart.forEach(item => {
          const cartItemElement = document.createElement('div');
          cartItemElement.className = 'flex items-center justify-between p-2 border-b border-gray-100';
          cartItemElement.innerHTML = `
            <div class="flex items-center">
              <img src="${item.img}" alt="${item.name}" class="w-16 h-16 object-cover rounded-md mr-3">
              <div>
                <h4 class="font-medium">${item.name}</h4>
                <p class="text-heytea-green text-sm">¥${item.price.toFixed(2)}</p>
              </div>
            </div>
            <div class="flex items-center">
              <button class="decrease-qty w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center text-gray-600 hover:bg-gray-100 transition-colors" data-id="${item.id}">
                <i class="fa fa-minus text-xs"></i>
              </button>
              <span class="mx-3 text-gray-700">${item.quantity}</span>
              <button class="increase-qty w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center text-gray-600 hover:bg-gray-100 transition-colors" data-id="${item.id}">
                <i class="fa fa-plus text-xs"></i>
              </button>
            </div>
          `;
          cartItems.appendChild(cartItemElement);
        });
        
        // 添加数量调整事件监听
        document.querySelectorAll('.decrease-qty').forEach(button => {
          button.addEventListener('click', () => {
            const id = button.getAttribute('data-id');
            const item = cart.find(item => item.id === id);
            
            if (item.quantity > 1) {
              item.quantity--;
            } else {
              // 如果数量为1，再减少就从购物车移除
              cart = cart.filter(item => item.id !== id);
            }
            
            updateCartUI();
          });
        });
        
        document.querySelectorAll('.increase-qty').forEach(button => {
          button.addEventListener('click', () => {
            const id = button.getAttribute('data-id');
            const item = cart.find(item => item.id === id);
            item.quantity++;
            updateCartUI();
          });
        });
        
        checkoutBtn.disabled = false;
      }
      
      // 更新价格信息
      const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
      const packaging = cart.length > 0 ? 2 : 0; // 假设打包费为2元
      const total = subtotal + packaging;
      
      cartSubtotal.textContent = `¥${subtotal.toFixed(2)}`;
      cartPackaging.textContent = `¥${packaging.toFixed(2)}`;
      cartTotal.textContent = `¥${total.toFixed(2)}`;
    }
    
    // 结算按钮点击事件
    checkoutBtn.addEventListener('click', () => {
      alert('前往结算页面...');
      closeCart();
    });
    
    // 初始化购物车UI
    updateCartUI();
  </script>
</body>
</html>
